<template>

  <div class="box">
    <audio :src="audioUrl" ref="player"></audio>
     <div class="top">
       <div class="top_left">
         <img src="../assets/icon4/back.png" alt="" @click="Return">
       </div>
       <div class="top_zhong">
         <p class="top_zhong_p1">{{bjname1}}</p>
         <p class="top_zhong_p2">{{bjname2}}</p>
       </div>
       <div class="top_right">
         <img src="../assets/icon4/share04.png" alt="">
       </div>
     </div>
     <div class="zhong">
       <transition name="fade">
         <div class="Record"  v-show="!showLrc" @click="showLrc = true">
           <img :src="bjimgurl" alt="" class="zhong-img">
         </div>
       </transition>
       <transition name="fade">
         <div v-show="showLrc" ref="scroll" class="showLrc-box" @click="showLrc = false">
         <!--  <div v-html="songStr" class="songstr">-->
             <div class="warp">
        <span :key="item.time" v-for="item in lyricArr"
              :class="{active: item.cls}"
              style="height: 30px; line-height: 30px"
        >{{item.txt}}</span>
             </div>
         </div>

       </transition>

     </div>
     <div class="xia">
       <div class="xia_nva1">
         <ul class="xia-ul">
           <li>
             <img src="../assets/icon4/heart04.png" alt="">
           </li>
           <li>
             <img src="../assets/icon4/downLoad.png" alt="">
           </li>
           <li>
             <img src="../assets/icon4/skin.png" alt="">
           </li>
           <li>
             <img src="../assets/icon4/recommend04.png" alt="">
           </li>
           <li>
             <img src="../assets/icon4/more04.png" alt="" class="sgd">
           </li>
         </ul>
       </div>

       <div class="xia_nva2">
         <!--播放条-->

         <div class="player-bd_progress">
           <div class="progress-wastetime" >{{wasteTime}}</div>
           <div class="progress-bd">
             <van-slider
               v-model="value"
               bar-height="2px"
               active-color="#ee0a24"
               class="slider"
             >
               <div
                 slot="button"
                 class="custom-button"
               >
                 <div class="custom-button2"></div>
               </div>
             </van-slider>
           </div>
           <div class="progress-resttime">{{allTime}}</div>
         </div>
       </div>


       <div class="xia_nva3">
         <ul class="xia_nva3_ul">
           <li >
             <img src="../assets/icon4/return.png" alt="" class="loop">
           </li>
           <li >
             <img src="../assets/icon4/lastSong.png" alt="" class="Last-song" @click="upPlay">
           </li>
           <li >
             <img :src="playimg" alt="" class="play-pause" @click="songPlay">
           </li>
           <li>
             <img src="../assets/icon4/nextSong.png" alt="" class="next-song" @click="nextPlay">
           </li>
           <li>
             <img src="../assets/icon4/menu04.png" alt=""  class="more">
           </li>
         </ul>
       </div>
     </div>
    <div class="boxbj">
      <img :src="bjimgurl"   alt="" class="boxbjimg">
    </div>

  </div>

</template>

<script>
  import lyricParser from 'lyric-parser';
  import BScroll from 'better-scroll';


  export default {
          name: "play",
        data() {
         return {
           audioUrl: '',
           id: this.$route.query.index,
           bjimgurl: '',
           bjname1: '',
           bjname2: '',
           value: 0,
           showLrc: false,
           isPlay:false,
           playimg: require('../assets/icon4/play.png'),
           lyricArr: [],
           scroller: null,
           searchSong: '',
           wasteTime: 0,
           allTime: 0,
         };
       },

       methods:{

         Return(){
           this.$router.back(-1);
         },
         handleLyric({ lineNum }) {
           this.lyricArr[lineNum - 1 < 0 ? 0 : lineNum - 1].cls = false;
           this.lyricArr[lineNum].cls = true;
           if(lineNum > 6) {
             this.scroller.scrollTo(0, -(lineNum - 5) * 30, 400);
           }
         },
         songPlay() {
           this.isPlay = !this.isPlay;
           if (this.isPlay) {
             this.$refs.player.play();
             this.lyricObj.play();
           } else {
             this.$refs.player.pause();
           }
         },
         upPlay() {
           this.id = this.id - 1;
         },
         nextPlay() {
           this.id = this.id + 1;
         },

         formatTime(time) {
           const ontime = ~~(time / 60);
           const uptime = ~~(time % 60);
           if (ontime < 10) {
             if (uptime < 10) {
               return `0${ontime}:0${uptime}`;
             } return `0${ontime}:${uptime}`;
           } else if (uptime < 10) {
             return `${ontime}:0${uptime}`;
           }
           return `${ontime}:${uptime}`;
         },

       },
       //  暂停\播放
       watch: {
         isPlay() {
           if (this.isPlay) {
             this.playimg = require('../assets/icon4/stop.png');
           } else {
             this.playimg = require('../assets/icon4/play.png');
           }
         },
         id() {
           this.playimg = require('../assets/icon4/play.png');

           this.$http.get(`/api/song/url?id=${this.$store.state.lyricsid[this.id]}`).then((res) => {
             // console.log(res.data);
             this.audioUrl = res.data.data[0].url;
           }).catch((err) => {
             console.dir(err);
           });

           this.$http.get(`/api/song/detail?ids=${this.$store.state.lyricsid[this.id]}`).then((res) => {
             this.bjname1 = res.data.songs[0].name;
             this.bjimgurl = res.data.songs[0].al.picUrl;
             this.bjname2 = res.data.songs[0].ar[0].name;
           });

           // 获取歌词
           this.$http.get(`/api/lyric?id=${this.$store.state.lyricsid[this.id]}`)
             .then((res) => {
               this.lyric = res.data.lrc.lyric;
               this.lyricObj = new lyricParser(this.lyric, this.handleLyric);
               console.log(this.lyricObj);
               this.lyricArr = this.lyricObj.lines.map((item) => {
                 item.cls = false;
                 return item;
               });
               const proto = this;
               proto.wasteTime = proto.formatTime(this.currentTime);
               this.$refs.player.onloadedmetadata = function () {
                 proto.allTime = proto.formatTime(this.duration);
               };
               this.$refs.player.ontimeupdate = function () {
                 if (proto.wasteTime !== this.currentTime) {
                   proto.wasteTime = proto.formatTime(this.currentTime);
                   proto.value = (this.currentTime * 100) / this.duration;
                   window.time = this;
                 }
               };


             })
             .catch((err) => {});
         },
       },


       created() {
         this.$http.get(`/api/song/detail?ids=${this.$store.state.lyricsid[this.id]}`).then((res) => {
           this.bjname1 = res.data.songs[0].name;
           this.bjimgurl = res.data.songs[0].al.picUrl;
           this.bjname2 = res.data.songs[0].ar[0].name;
         });

         this.$http.get(`/api/song/url?id=${this.$store.state.lyricsid[this.id]}`).then((res) => {
           // console.log(res.data);
           this.audioUrl = res.data.data[0].url;
         }).catch((err) => {
           console.dir(err);
         });
         // 获取歌词
         this.$http.get(`/api/lyric?id=${this.$store.state.lyricsid[this.id]}`)
         .then((res) => {
           this.lyric = res.data.lrc.lyric;
           this.lyricObj = new lyricParser(this.lyric, this.handleLyric);
           console.log(this.lyricObj);
           this.lyricArr = this.lyricObj.lines.map((item) => {
             item.cls = false;
             return item;
           });
           const proto = this;
           proto.wasteTime = proto.formatTime(this.currentTime);
           this.$refs.player.onloadedmetadata = function () {
             proto.allTime = proto.formatTime(this.duration);
           };
           this.$refs.player.ontimeupdate = function () {
             if (proto.wasteTime !== this.currentTime) {
               proto.wasteTime = proto.formatTime(this.currentTime);
               proto.value = (this.currentTime * 100) / this.duration;
               window.time = this;
             }
           };


         })
         .catch((err) => {});
       },
       mounted() {
         this.scroller = new BScroll(this.$refs.scroll, {});

       },
     }
</script>

<style scoped>
  .showLrc-box{
    width: 80vw;
    height: 63vh;
    margin: -80px auto;
    overflow: hidden;
  }
  span{
    display: block;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
  }
  .active{
    color: orangered;
  }
  .box{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
  }
  .boxbj{
    position: absolute;
    width: 200vw;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    filter: blur(10px);
    z-index:-1;
  }
  .boxbjimg{
    width: inherit;
    height: inherit;
  }
  .top{
    width: 100%;
    height: 50px;

  }
  .top_left{
    width: 15%;
    height: 50px;
    float: left;
  }
  .top_left img{
    display: block;
    width: 14px;
    margin-top: 12px;
    margin-left: 15px;
  }
  .top_zhong{
    width: 70%;
    height: 50px;
    float: left;
  }
  .top_zhong_p1{
    width: 100%;
    height: 30px;
    line-height: 35px;
    font-size: 18px;
    color: #fff;
    text-align: center;
  }
  .top_zhong_p2{
    width: 100%;
    height: 20px;
    font-size: 14px;
    color: #fff;
    text-align: center;
  }
  .top_right{
    width: 15%;
    height: 50px;
    float: right;
  }
  .top_right img{
    display: block;
    width: 22px;
    margin-top: 14px;
    margin-left: 25%;
  }

  .zhong{
    width: 100vw;
    height: 435px;
    padding-top: 92px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .Record{
    width: 250px;
    height: 250px;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
  }
  .Record .zhong-img{
    width: inherit;
    height: inherit;
    animation: myfirst 25s;
  }
  @-webkit-keyframes myfirst{
    from { -webkit-transform:rotate(0deg) }
    to { -webkit-transform:rotate(360deg) }
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to {
    opacity: 0
  }

  .xia{
    width: 100vw;
    height: 180px;
  }

  .xia_nva1{
    width: 100vw;
    height: 60px;
  }
  .xia-ul{
    width: 78vw;
    height: 60px;
    margin:  0 auto;
  }
  .xia-ul li{
    width: 20%;
    height: 60px;
    float: left;
  }
  .xia-ul li img {
    display: block;
    width: 20px;
    margin: 20px auto;
  }
  .xia-ul li .sgd{
    display: block;
    width: 4px;
    height: 18px;
  }

  .xia_nva2{
    width: 100vw;
    height: 50px;
    font-size: 16px;
  }
  .progress-wastetime{
    width: 50px;
    height: 50px;
    line-height: 50px;
    float: left;
    color: #fff;
    font-size: 14px;
    text-align: center;
  }
  .progress-resttime{
    width: 50px;
    height: 50px;
    line-height: 50px;
    float: right;
    color: #fff;
    font-size: 14px;
    text-align: center;
  }
  .progress-bd {
    width: 270px;
    height: 50px;
    float: left;
  }
  .custom-button{
    width: 15px;
    height: 15px;
    background: #fff;
    border-radius: 50%;
    padding: 5px ;
    box-sizing: border-box;
  }
  .custom-button2{
    width: 5px;
    height: 5px;
    background: #9f9f9f;
    border-radius: 50%;
  }
  .slider{
    margin-top: 23px;
    margin-left: 8px;
  }

  .xia_nva3{
    width: 100vw;
    height: 70px;
  }
  .xia_nva3_ul{
    width: 100vw;
    height: 70px;
  }
  .xia_nva3_ul li{
    width: 20%;
    float: left;
    height: 70px;
  }
  .xia_nva3_ul li .loop{
    display: block;
    width: 20px;
    margin-top: 18px;
    margin-left: 15px;
  }
  .xia_nva3_ul li .Last-song{
    display: block;
    width: 23px;
    margin-top: 15px;
    margin-left: 25px;
  }
  .xia_nva3_ul li .play-pause{
    display: block;
    width: 42px;
    margin-top: 5px;
    margin-left: 18px;
  }
  .xia_nva3_ul li .next-song{
    display: block;
    width: 23px;
    margin-top: 15px;
    margin-left: 25px;
  }
  .xia_nva3_ul li .more{
    display: block;
    width: 20px;
    margin-top: 18px;
    margin-left: 35px;
  }



</style>
